<template>
	<uni-nav-bar title="车友团" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
	<view class="package_sale center" style="padding:15rpx;margin: 0px;justify-content: space-around;">
		<uni-section title="本地数据" type="line">
			<uni-data-select v-model="value" :localdata="localiList" @change="change"></uni-data-select>
		</uni-section>
		<input class="uni-input" confirm-type="search" placeholder="搜索车友团" v-model="search" @input="interrogate"
			@confirm="confirm">
	</view>
	<!-- 团队列表 -->
	<view class="package_sale" @click="open(item.id,item.name)" v-for="item in teamList" :key="item.id">
		<view class="space-between">
			<view style="width: 60%;">{{item.name}}</view>
			<view style="width: 40%;text-align: right;">{{item.region}}</view>
		</view>
		<view style="color: #666;margin-top: 10rpx;font-size: 26rpx;">
			钱包支付<text style="color: #EAA453;">{{item.level_price.money}}</text>元/公斤
			微信支付<text style="color: #EAA453;">{{item.level_price.wechat}}</text>元/公斤
		</view>
	</view>
	<Popu v-if="teamList.length<1" :pageHeight="500" text="暂无团队列表"></Popu>
	<!-- 邀请弹框 -->
	<uni-popup ref="popup" type="center" style="z-index: 910">
		<view class="column invite">
			<view style="width: 100%;">{{inviteName}}</view>
			<view>
				<view class="center" style="justify-content: center;" @click="open(inviteId,inviteName,1)"
					v-if="time==0">
					<uni-icons type="refresh-filled" size="50" color="#fff"></uni-icons>
				</view>
				<image :src="inviteImage" mode=""></image>
			</view>
			<view>车友扫码绑定({{time}})s</view>
		</view>
	</uni-popup>
	<!-- 邀请得温馨提示 -->
	<uni-popup ref="tips" type="center" style="z-index: 910">
		<view class="package column" style="width:650rpx;padding:30rpx 30rpx 50rpx 30rpx;">
			<view>温馨提示</view>
			<view style="margin-top:25rpx">{{text}}</view>
		</view>
	</uni-popup>
</template>

<script setup lang="ts">
	import { navBack } from '@/utils/navigator';
	import Popu from '@c/earthPushing/common/popu.vue';
	import { onUnload, } from '@dcloudio/uni-app';
	import { ref } from 'vue';
	import { getRegionList, get_team_list_by_delivery, GetCities, getTeamYq } from '@/gql/earthPushing/invite';
	import { showLoading, errorToast } from '@/utils/prompt';
	import { subject, subscribe, toPublish, unsubscribe } from '@mqtt';
	import type { Subscription } from 'rxjs';
	import { getDriverID } from '@/stores/driverID';
	import { useUserInformation } from '@/stores/earthPushing/userSale';
	let subscription : Subscription = null;
	const text = ref('')
	const userInfo = useUserInformation();
	const staff_id = getDriverID();
	const popup = ref(null)
	//搜索信息
	const search = ref('')
	const inquireAbout = ref(false)
	// 地址列表
	const localiList = ref()
	const value = 0
	const region_id = ref(0)
	//团列表
	const teamList = ref([])

	//位置信息
	const longitude = ref()
	const latitude = ref()
	const codeLoce = ref()
	//邀请信息
	const inviteImage = ref('')
	const inviteName = ref('')
	const inviteId = ref()
	//倒计时
	const time = ref(20)
	const countdown = ref(null)

	// 温馨提示
	const tips = ref(null)
	uni.getLocation({
		type: 'wgs84',
		success: function (res) {
			console.log('当前位置的经度：' + res.longitude);
			console.log('当前位置的纬度：' + res.latitude);
			longitude.value = res.longitude
			latitude.value = res.latitude
			sub()
		}
	});
	/**
	 * 获取当前位置信息
	 * @param {Number} lon 当前驻车地址位置的经度
	 * @param {Number} lat 当前驻车地址位置的纬度
	 */
	function sub() {
		showLoading('正在加载');
		const payload = {
			query: GetCities,
			variables: {
				lon: longitude.value,
				lat: latitude.value,
			},
		};
		toPublish('ql/team/getCity', payload, (obj : any) => {
			uni.hideLoading();
			const { data } = obj;
			codeLoce.value = data.get_city.code;
			init()
		});
	}
	// 获取车友团信息
	function init() {
		showLoading('正在加载');
		const payload = {
			query: get_team_list_by_delivery,
			variables: {
				delivery_id: userInfo.delevery_id,
				code: codeLoce.value,
				type: 1,
				region_id: region_id.value,
				keywords: search.value
			},
		};
		toPublish('ql/team/getTeamListByDelivery', payload, (obj : any) => {
			uni.hideLoading();
			const { data } = obj;
			teamList.value = data.get_team_list_by_delivery;
			topics()
		});
	}
	localization()
	function localization() {
		showLoading('正在加载');
		const payload = {
			query: getRegionList,
			variables: {
				delivery_id: userInfo.delevery_id,
			},
		};
		toPublish('ql/staff/getRegionList', payload, (obj : any) => {
			uni.hideLoading();
			const { data } = obj;
			localiList.value = data.getRegionList
		});
	}
	//切换位置
	function change(e : any) {
		console.log(e)
		region_id.value = localiList.value[e].id
		teamList.value = []
		init()
	}
	/**
	  * 搜索内容
	  * @property {Object} evt 监听搜索框输入信息
	  */
	function interrogate(evt : any) {
		const { detail } = evt;
		if (!detail.value && inquireAbout) {
			teamList.value = []
			init()
		}
	}
	/**
	 * 搜索
	 */
	function confirm() {
		if (search.value) {
			inquireAbout.value = search.value ? true : false;
			teamList.value = []
			init()
		} else {
			errorToast('请输入您要搜索的内容')
		}
	}
	function open(id : number, name : string, type : number) {
		inviteName.value = name
		inviteId.value = id
		clearInterval(countdown.value);
		time.value = 20
		showLoading('正在加载');
		const payload = {
			query: getTeamYq,
			variables: {
				staff_id,
				team_id: id
			},
		};
		toPublish('ql/staff/getTeamYq', payload, (obj : any) => {
			uni.hideLoading();
			const { data } = obj;
			inviteImage.value = data.getTeamYq.image
			countdown.value = setInterval(() => {
				if (time.value != 0) {
					time.value--
				} else {
					clearInterval(countdown.value);
				}
			}, 1000)
			if (type !== 1) {
				popup.value.open();
			}
		});
	}
	/**
	 * 接收信息
	 * @property {Object} num 返回加注机信息
	 */
	function viewDdata(num : any) {
		const ref = num;
		if (ref.jsondata.msg) {
			text.value = ref.jsondata.msg
			popup.value.close();
			tips.value.open()
		}
	}
	/**
	 * 订阅主题
	 */
	function topics() {
		const token = staff_id;
		const topic = 'formal/v1/driver/team/client/' + token;
		toSubscribe();
		subscribe(topic)
	}
	/**
	 * 取消订阅
	 */
	function deltopics() {
		toUnsubscribe();
		const token = staff_id;
		const topic = 'formal/v1/driver/team/client/' + token;
		unsubscribe(topic);
	}

	function toSubscribe() {
		if (subscription === null) {
			subscription = subject.subscribe(viewDdata);
		}
	}

	function toUnsubscribe() {
		subscription.unsubscribe();
		subscription = null;
	}
	onUnload(() => {
		if (subscription !== null) {
			subscription.unsubscribe();
		}
		deltopics();
	});
</script>

<style scoped lang="less">
	input {
		width: 540rpx;
		height: 72rpx;
		background: #ECF1F5;
		border-radius: 36rpx;
		text-align: center;
		padding: 0px 10rpx;
		box-sizing: border-box;
	}

	.invite {
		width: 600rpx;
		background: #FFFFFF;
		border-radius: 5px;
		padding: 30rpx;
		box-sizing: border-box;

		view:nth-of-type(2) {
			width: 318rpx;
			height: 318rpx;
			margin: 25rpx 0px;
			position: relative;

			view:nth-of-type(1) {
				width: 318rpx;
				height: 318rpx;
				position: absolute;
				top: 0px;
				left: 0px;
				z-index: 2;
				background-color: rgba(0, 0, 0, .6);
			}
		}

		image {
			width: 318rpx;
			height: 318rpx;
		}
	}
</style>